<template>
	<view>
		<view class="header">
			<u-search placeholder="输入商品名称搜索" v-model="keyword" @custom="onSearch"></u-search>

		</view>
		<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @change="confirmDate" />
		<view style="margin-bottom: 20rpx;"></view>
		<view class="log-list">
			<view class="list-item" v-for="item in list" :key="item.id" @tap="toDetail(item)">
				<view class="item-top">
					<view class="item-top-name">{{item.goods_title}}</view>
					<!-- <view class="item-top-price">￥998.00</view> -->
				</view>
				<view class="item-bot">
					<view class="item-bot-left">
						<view class="item-bot-left-num">商品编号: {{item.on}}</view>
						<view class="item-bot-left-time">扫码时间:{{item.addtime_text}}</view>
					</view>
					<view class="item-bot-right">
						<image v-if="item.state==2" src="../../static/feizhengpin.png" mode=""></image>
						<image v-if="item.state==1" src="../../static/zhengpin.png" mode=""></image>
						<image v-if="item.state==0" src="../../static/saomazhongduan.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				range: ["", ""],
				keyword: '',
				list: []
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			onSearch(val){
				this.init()
			},
			confirmDate(e) {
				this.init()
			},
			arrayToString(arr) {
				let str = ''
				arr.forEach(item => {
					str.length === 0 ? (str += item) : (str += ',' + item)
				})
				return str
			},
			async init() {
				const dd = {
					page: 1,
					limit: 10000,
					keyword: this.keyword,
					search_time:this.arrayToString(this.range),
				}
				const {
					code,
					data,
					msg
				} = await this.request('ewm_log/index', dd, 'POST')
				if (code === 1) {
					this.list = data
				}
			},
			toDetail(item){
				uni.navigateTo({
					url:`/pages/scanlogdetail/scanlogdetail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.log-list {
		width: 700rpx;
		margin: 0 auto;
	}

	.list-item {
		width: 100%;
		height: 280rpx;
		border: 2rpx solid #e5e5ea;
		border-radius: 10rpx;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 20rpx;

	}

	.item-top {
		height: 100rpx;
		border-bottom: 2rpx solid #e5e5ea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.item-bot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.item-bot-left {
		font-size: 28rpx;
	}

	.item-bot-left-num {
		margin-bottom: 20rpx;
	}

	.item-bot-right {
		width: 140rpx;
		height: 140rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
</style>